document.addEventListener('DOMContentLoaded', function () {
    const videoBtn = document.querySelector('.dragondance-video-btn');
    const videoContainer = document.querySelector('.dragondance-vid');
    const video = document.getElementById('dragon-video');
    const leftPic = document.querySelector('.dragondance-pic-left');
    const rightPic = document.querySelector('.dragondance-pic-right');
    const dragondancePic = document.querySelector('.dragondance-pic');

    videoBtn.addEventListener('click', function () {
        // 执行图片平移和隐藏的动画
        leftPic.style.transform = 'translateX(-100%)';
        rightPic.style.transform = 'translateX(100%)';

        // 显示视频并开始播放
        videoContainer.style.display = 'block';
        video.play();

        // 设置视频播放完毕后的处理
        video.onended = function () {
            // 恢复图片到原始位置
            leftPic.style.transform = 'translateX(0)';
            rightPic.style.transform = 'translateX(0)';
        };
    });
});